<template>
    <div>
        <el-card>
            <template #header>
                楼栋
            </template>
            <el-button v-for="(item,index) in buildList" :key="index" @click="changeBuild(index)">{{item.name}}</el-button>
        </el-card>
        <el-card>
            <template #header>
                房间
            </template>
            <div id="mytb"></div>
        </el-card>
    </div>
</template>
<script>
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.css';
import rooms from './rooms'
/* eslint-disable */
export default {
    data() {
        return {
            container: null,
            buildList: [
                { id: 1, name: '小别墅' },
                { id: 2, name: '中心楼' }
            ],
            mergeCells: [],
            hot: null, // handsontable实例
        }
    },
    mounted() {
        this.container = document.getElementById('mytb');
        const tableData = this.initData(0)
        this.initTable(this.container, tableData)
        // 修改配置-设置合并
        this.hot.updateSettings({mergeCells: this.mergeCells})
    },
    methods: {
        // 拼装数据
        initData(index) {
            // 初始化表格数据
            let tdata = [
                ['楼层','单元'],
                ['','房号']
            ]
            const roomsData = rooms[index].data
            
            // 初始化mergeCells数据
            this.mergeCells = [{ row: 0, col: 0, rowspan: 2, colspan: 1 }]

            // 计数：每单元几户 用于合并单元的单元格
            // 有个前提，每个单元的户型都是一样的，即1单元4户，2单元也是4户。
            let unitColspan = 0
            roomsData.buildDoor.forEach(item => {
                if (item.unitId === roomsData.buildUnit[0].unitId) {
                    unitColspan = unitColspan + 1
                }
            })
            // 拼单元数据
            for (let i = 0; i < roomsData.buildUnit.length; i++) {
                tdata[0].push(roomsData.buildUnit[i].unitName)
                // 单元的合并
                this.mergeCells.push({row: 0,col: i+2+(unitColspan-1)*i,rowspan: 1,colspan: unitColspan})
                for(let j=0; j<unitColspan-1;j++){
                    tdata[0].push('')
                }
            }
            // 拼房号数据
            for (let i = 0; i < roomsData.buildDoor.length; i++) {
                tdata[1].push(roomsData.buildDoor[i].doorName)
            }
            // 从第三层开始拼每楼层的数据
            // 循环floor 拼出每一层的楼层号
            for (let i = 0; i < roomsData.buildFloor.length; i++) {
                tdata.push([roomsData.buildFloor[i].floorName,''])
                // 楼层号的合并
                this.mergeCells.push({row: 2+i,col: 0,rowspan: 1,colspan: 2})
                for (let j = 0; j < roomsData.buildRoom.length; j++) {
                    if (roomsData.buildRoom[j].floorId === roomsData.buildFloor[i].floorId) {
                        tdata[i+2].push(roomsData.buildRoom[j].roomNo)
                    }
                }
            }
            console.log('合并的单元格：', this.mergeCells)
            return tdata
        },
        // 初始化表格 只执行一次
        initTable(container, data) {
            const that = this
            const hot = new Handsontable(container, {
                licenseKey: 'non-commercial-and-evaluation',
                data: data,
                height: 'auto',
                contextMenu: {
                    items: {
                        "getcoord": {
                            name: '获取坐标',
                            callback(key, options, e) {
                                let start = options[0].start // 获取 开始坐标
                                let end = options[0].end     // 获取 结束坐标
                                console.log(start,end)
                            }
                        },
                        'merge': {
                            name: '合并',
                            callback(key, options, e) {
                                let start = options[0].start // 获取 开始坐标
                                let end = options[0].end     // 获取 结束坐标
                                this.getPlugin('MergeCells').enablePlugin()
                                this.getPlugin('MergeCells').merge(start.row, start.col, end.row, end.col)
                            }
                        },
                        'unmerge': {
                            name: '取消合并',
                            callback(key, options, e) {
                                let start = options[0].start // 获取 开始坐标
                                let end = options[0].end     // 获取 结束坐标
                                this.getPlugin('MergeCells').enablePlugin()
                                this.getPlugin('MergeCells').unmerge(start.row, start.col, end.row, end.col)
                            }
                        }
                    }
                },
                
                columns(index){
                    return {
                        readOnly: index == 0 || index == 1
                    }
                },
                afterOnCellMouseDown(event, coords, TD){
                    that.clickHeadSelect(coords,TD,that.hot)
                }
            });
            this.hot = hot
        },
        // 切换楼栋，重新渲染表格
        changeBuild(index){
            const data = this.initData(index)
            this.hot.loadData(data)
            this.hot.updateSettings({mergeCells: this.mergeCells})
        },
        // 模拟表头选择
        clickHeadSelect(coords,TD,hot){
            if(coords.row == 0 && coords.col >= 2){
                const rows = hot.countRows()
                hot.selectCell(coords.row,coords.col,rows-1,coords.col)
            } else if(coords.row == 1 && coords.col >= 2){
                const rows = hot.countRows()
                hot.selectCell(coords.row,coords.col,rows-1,coords.col)
            }
            // 点击楼层
            if(coords.col < 2 && coords.row >= 2){
                hot.selectRows(coords.row)
            }
        }
    }
}
</script>